1
00:00:02,070 --> 00:00:04,600
Jadi sekarang kita sudah belajar cukup banyak

2
00:00:04,600 --> 00:00:06,910
tentang Redux tetapi sampai saat ini,

3
00:00:06,910 --> 00:00:10,960
kami selalu bekerja dengan nilai penghitung tunggal kami.

4
00:00:10,960 --> 00:00:13,600
Sekarang saya mendapatkan tombol Toggle Counter di sini

5
00:00:13,600 --> 00:00:14,710
dan ketika diklik,

6
00:00:14,710 --> 00:00:17,090
Saya ingin memastikan bahwa penghitungnya disembunyikan

7
00:00:17,090 --> 00:00:19,710
dan ketika diklik lagi, seharusnya ditampilkan lagi.

8
00:00:19,710 --> 00:00:23,253
Sekarang untuk ini, tentu saja, kita bisa menggunakan useState.

9
00:00:24,113 --> 00:00:27,420
Jadi kita bisa menyiapkan beberapa negara bagian lokal di komponen ini

10
00:00:27,420 --> 00:00:31,400
yang kami kelola dengan useState, bukan dengan Redux.

11
00:00:31,400 --> 00:00:34,090
Dan itu adalah cara yang tepat untuk melakukannya

12
00:00:34,090 --> 00:00:37,180
karena menampilkan atau menyembunyikan counter

13
00:00:37,180 --> 00:00:40,900
adalah sesuatu yang hanya menarik untuk komponen ini,

14
00:00:40,900 --> 00:00:44,080
tidak ke bagian lain dari aplikasi

15
00:00:44,080 --> 00:00:46,990
tetapi hal yang sama dapat terjadi di konter kami.

16
00:00:46,990 --> 00:00:50,410
Kami hanya menggunakan penghitung pada komponen ini di sini.

17
00:00:50,410 --> 00:00:53,660
Jadi counternya secara teknis juga adalah negara bagian setempat

18
00:00:54,560 --> 00:00:57,400
tapi ini hanyalah demo sederhana untuk memulai.

19
00:00:57,400 --> 00:01:01,540
Jadi mari kita asumsikan baik penghitung maupun negara

20
00:01:01,540 --> 00:01:03,930
dimanapun penghitungnya harus terlihat atau tidak,

21
00:01:03,930 --> 00:01:06,940
adalah negara global yang juga menarik

22
00:01:06,940 --> 00:01:10,540
ke komponen lain padahal di sini tidak demikian.

23
00:01:10,540 --> 00:01:13,200
Seiring kemajuan kita setelah kita mengetahui dasar-dasar ini,

24
00:01:13,200 --> 00:01:16,530
kami tentu saja juga akan mengerjakan demo dan proyek

25
00:01:16,530 --> 00:01:19,270
di mana hal ini sebenarnya terjadi.

26
00:01:19,270 --> 00:01:21,820
Tapi untuk saat ini, anggap saja.

27
00:01:21,820 --> 00:01:23,560
Jadi ketika kita mengklik tombol ini,

28
00:01:23,560 --> 00:01:26,520
toggleCounterHandler diaktifkan.

29
00:01:26,520 --> 00:01:29,900
Dan kemudian di sini kami ingin mengirimkan tindakan

30
00:01:29,900 --> 00:01:32,720
yang mengubah beberapa status di Redux

31
00:01:32,720 --> 00:01:36,263
yang mengontrol apakah div penghitung ini ditampilkan atau tidak.

32
00:01:37,910 --> 00:01:41,080
Untuk ini, kita perlu menambahkan negara bagian baru

33
00:01:41,080 --> 00:01:45,400
sepotong data baru ke toko Redux kami.

34
00:01:45,400 --> 00:01:48,310
Dan bagaimana kita melakukannya sekarang?

35
00:01:48,310 --> 00:01:50,750
Nah, untuk menambahkan data baru,

36
00:01:50,750 --> 00:01:54,910
kita harus pergi ke peredam pada akhirnya dan menambahkannya saja

37
00:01:54,910 --> 00:01:59,910
untuk semua snapshot negara bagian yang kami hasilkan.

38
00:02:00,050 --> 00:02:02,750
Mari kita mulai dengan cuplikan keadaan awal.

39
00:02:02,750 --> 00:02:05,370
Saat kita memulai selain memiliki counter

40
00:02:05,370 --> 00:02:09,500
yang nilainya nol, saya ingin memiliki bidang showCounter

41
00:02:09,500 --> 00:02:14,230
yang mempunyai nilai benar atau salah, itu terserah anda.

42
00:02:14,230 --> 00:02:15,980
Dan agar ini lebih mudah dibaca,

43
00:02:15,980 --> 00:02:18,970
Saya akan mengekstraknya dan menyimpannya secara konstan

44
00:02:18,970 --> 00:02:22,520
bernama inisialState seperti ini

45
00:02:22,520 --> 00:02:25,080
dan tetapkan inisialState di sini

46
00:02:25,080 --> 00:02:27,223
hanya untuk membuat ini sedikit lebih mudah dibaca.

47
00:02:28,370 --> 00:02:32,790
Sekarang ketika kita menambah, kita mengubah penghitungnya,

48
00:02:32,790 --> 00:02:35,490
kami tidak peduli dengan showCounter.

49
00:02:35,490 --> 00:02:40,490
Kita masih perlu menyetel properti showCounter di sini

50
00:02:40,550 --> 00:02:44,490
karena kami mengembalikan objek keadaan secara keseluruhan

51
00:02:44,490 --> 00:02:48,720
dan Redux tidak akan menggabungkan perubahan Anda dengan status yang ada.

52
00:02:48,720 --> 00:02:50,990
Sebaliknya, ia mengambil apa yang Anda kembalikan

53
00:02:50,990 --> 00:02:54,360
dan menggantikan keadaan yang ada dengan itu.

54
00:02:54,360 --> 00:02:56,350
Lebih lanjut tentang itu sebentar lagi.

55
00:02:56,350 --> 00:02:58,540
Tapi untuk saat ini, terima saja

56
00:02:58,540 --> 00:03:03,080
dan setel showCounter di sini ke state.showCounter.

57
00:03:03,080 --> 00:03:05,970
Jadi dengan nilai yang kita miliki saat ini di negara kita

58
00:03:05,970 --> 00:03:08,480
karena demi peningkatan, kami tidak ingin mengubahnya,

59
00:03:08,480 --> 00:03:12,263
jadi kita ambil saja nilai showCounter yang ada.

60
00:03:13,670 --> 00:03:16,510
Dan kemudian kita bisa melakukan hal yang sama di sini untuk peningkatan

61
00:03:16,510 --> 00:03:18,330
karena disana kami juga ingin menjaganya

62
00:03:18,330 --> 00:03:21,230
nilai showCounter yang ada

63
00:03:21,230 --> 00:03:24,173
dan lakukan hal yang sama untuk pengurangan di sini.

64
00:03:25,780 --> 00:03:29,650
Tapi sekarang saya juga akan menangani tipe tindakan baru

65
00:03:29,650 --> 00:03:32,700
dan ngomong-ngomong, karena kita punya banyak pernyataan if di sini,

66
00:03:32,700 --> 00:03:35,670
kita juga bisa menggunakan pernyataan switch case,

67
00:03:35,670 --> 00:03:38,900
tapi saya akan tetap menggunakan beberapa pernyataan if di sini untuk saat ini

68
00:03:38,900 --> 00:03:41,310
dan dalam tipe tindakan baru ini,

69
00:03:41,310 --> 00:03:44,700
Saya akan memeriksa, katakanlah beralih.

70
00:03:44,700 --> 00:03:47,700
Sekarang pengidentifikasinya sama seperti semua pengidentifikasi ini

71
00:03:47,700 --> 00:03:48,950
terserah kamu.

72
00:03:48,950 --> 00:03:53,180
Saya akan menggunakan sakelar dan kemudian mengembalikan objek baru.

73
00:03:53,180 --> 00:03:56,540
Di sini, kami sekarang ingin mengubah showCounter

74
00:03:56,540 --> 00:04:00,100
dan mengaturnya menjadi kebalikan dari sebelumnya.

75
00:04:00,100 --> 00:04:03,040
Jika itu benar, kami ingin menjadikannya salah,

76
00:04:03,040 --> 00:04:05,960
jika itu salah, kami ingin menjadikannya benar.

77
00:04:05,960 --> 00:04:09,080
Dan kita bisa melakukannya hanya dengan menambahkan tanda seru

78
00:04:09,080 --> 00:04:11,900
dan kemudian mengakses state.showCounter.

79
00:04:11,900 --> 00:04:14,023
Ini akan membalikkan nilainya.

80
00:04:14,890 --> 00:04:18,010
Sekarang untuk counternya sendiri, kami ingin mempertahankan keadaan yang ada

81
00:04:18,010 --> 00:04:21,010
karena kami tidak ingin mengubahnya di sini untuk tindakan ini.

82
00:04:21,010 --> 00:04:23,593
Jadi kita tinggal menyetel counter ke state.counter.

83
00:04:25,660 --> 00:04:29,520
Sekarang kami juga mendukung jenis tindakan peralihan baru ini

84
00:04:29,520 --> 00:04:34,290
dan karenanya kembali ke counter.js di toggleCounterHandler,

85
00:04:34,290 --> 00:04:36,920
kita harus mengirimkan tindakan seperti itu.

86
00:04:36,920 --> 00:04:41,193
Kami mengirimkan objek tindakan baru yang tipenya adalah sakelar.

87
00:04:43,840 --> 00:04:47,910
Sekarang kita dapat memanfaatkan keadaan peralihan ini,

88
00:04:47,910 --> 00:04:50,360
jadi dari acara counter.state,

89
00:04:50,360 --> 00:04:52,630
dan untuk itu kita perlu mendapatkan akses ke sana.

90
00:04:52,630 --> 00:04:57,300
Jadi semuanya ada di counter, kita panggil lagi useSelector.

91
00:04:57,300 --> 00:05:00,910
Kita dapat menggunakan ini berkali-kali untuk mengambil bagian yang berbeda

92
00:05:00,910 --> 00:05:02,940
data dari negara.

93
00:05:02,940 --> 00:05:04,810
Dan di sini saya kemudian tertarik

94
00:05:04,810 --> 00:05:08,173
di bagian data showCounter saya,

95
00:05:09,170 --> 00:05:12,570
dan saya akan menyimpannya dalam konstanta pertunjukan.

96
00:05:12,570 --> 00:05:14,620
Nama konstannya tentu saja terserah Anda.

97
00:05:15,750 --> 00:05:18,190
Sekarang lagi, itu akan selalu diperbarui

98
00:05:18,190 --> 00:05:20,710
dan komponen tersebut akan dievaluasi kembali

99
00:05:20,710 --> 00:05:24,400
setiap kali data yang kami akses di sini berubah.

100
00:05:24,400 --> 00:05:27,760
Jadi sekarang di sini dengan pertunjukan diekstraksi,

101
00:05:27,760 --> 00:05:31,900
kita sekarang dapat merender div ini di sini dengan syarat

102
00:05:31,900 --> 00:05:35,130
dengan memeriksa apakah ditampilkan dan hanya merender div

103
00:05:35,130 --> 00:05:38,980
jika pertunjukannya benar, seperti ini.

104
00:05:38,980 --> 00:05:41,270
Jika sekarang kita simpan ini dan muat ulang,

105
00:05:41,270 --> 00:05:43,340
kalau kita klik Toggle Counter hilang,

106
00:05:43,340 --> 00:05:45,730
jika saya klik ini lagi, itu ada lagi.

107
00:05:45,730 --> 00:05:48,520
Saya masih bisa meningkatkannya meskipun disembunyikan

108
00:05:48,520 --> 00:05:50,320
tapi itu hanya muncul ketika,

109
00:05:50,320 --> 00:05:52,690
nah, ketika saya klik Toggle Counter.

110
00:05:52,690 --> 00:05:56,200
Jadi itu sekarang juga berhasil dan itulah yang bisa kami kelola

111
00:05:56,200 --> 00:06:01,030
beberapa bagian data yang berbeda di negara bagian kita.

112
00:06:01,030 --> 00:06:04,370
Tentu saja, data ini masih terhubung,

113
00:06:04,370 --> 00:06:05,853
kami memiliki penghitung dan kemudian negara bagian

114
00:06:05,853 --> 00:06:08,060
apakah kita ingin menunjukkannya atau tidak

115
00:06:08,060 --> 00:06:10,520
tapi nilainya terlalu berbeda

116
00:06:10,520 --> 00:06:13,470
yang diubah dengan cara yang sangat berbeda.

117
00:06:13,470 --> 00:06:15,570
Jadi, itulah cara kita mengelolanya

118
00:06:15,570 --> 00:06:17,463
beberapa bagian data.